import 'swiper/css'
import 'swiper/css/bundle'
import './SetSystem.scss'

import { Button } from 'antd'
import { useState } from 'react'


import { EffectFade } from 'swiper/modules'
import { SaveFilled } from '@ant-design/icons'
import { Swiper, SwiperSlide } from 'swiper/react'

import SetSystemCONFIG from './SetSystemCONFIG'
import SetSystemTHEME from './SetSystemTHEME'
import SetSystemLOGO from './SetSystemLOGO'
import SetSystemMENU from './SetSystemMENU'
import SetSystemTITLE from './SetSystemTITLE'

import SetSystemOPTIONS from './SetSystemOPTIONS'
import SetSystemUSER from './SetSystemUSER'
import SetSystemTABS from './SetSystemTABS'
import SetSystemBODY from './SetSystemBODY'

import { themeStore } from '../Config/zustand'
import { GetIndexedDB } from '../Utils/IndexedDB'

const SetSystem = () => {
    const NavMapping = [
        { uuid: 0, title: 'CONFIG', after: '#262626', before: '#f9f9f9', Temp: SetSystemCONFIG },
        { uuid: 1, title: 'THEME', after: '#f83600', before: '#f9d423', Temp: SetSystemTHEME },
        { uuid: 2, title: 'LOGO', after: '#f9d423', before: '#00c9ff', Temp: SetSystemLOGO },
        { uuid: 3, title: 'MENU', after: '#00c9ff', before: '#92fe9d', Temp: SetSystemMENU },
        { uuid: 4, title: 'TITLE', after: '#92fe9d', before: '#b721ff', Temp: SetSystemTITLE },
        { uuid: 5, title: 'OPTIONS', after: '#b721ff', before: '#21d4fd', Temp: SetSystemOPTIONS },
        { uuid: 6, title: 'USER', after: '#21d4fd', before: '#e8198b', Temp: SetSystemUSER },
        { uuid: 7, title: 'TABS', after: '#e8198b', before: '#c7eafd', Temp: SetSystemTABS },
        { uuid: 8, title: 'BODY', after: '#c7eafd', before: '#f83600', Temp: SetSystemBODY },
    ]

    const { theme, updateTheme } = themeStore()



    const [Active, setActive] = useState(0)
    const [InitSwiper, setInitSwiper] = useState()
    const onActive = (uuid) => {
        setActive(uuid)
        InitSwiper.slideTo(uuid)
    }

    const onSubmit = () => {

        console.log(theme)

    }


    return (
        <div className='SetSystem'>
            <div className='Left'>
                {NavMapping.map(({ uuid, title }) =>
                    <div
                        key={uuid}
                        onClick={() => onActive(uuid)}
                        className={`Nav ${Active === uuid ? 'active' : ''}`}
                    >
                        {title}
                    </div>
                )}
                <div
                    className='indicator'
                    style={{ top: Active * 48 + 12, background: `linear-gradient(130deg, ${NavMapping[Active].after}, ${NavMapping[Active].before})` }}
                />

                <div className='Submit'>
                    <Button size='large' block type='primary' icon={<SaveFilled />} onClick={onSubmit} />
                </div>

            </div>
            <div className='Right'>
                <Swiper
                    onSwiper={setInitSwiper}
                    modules={[EffectFade]}
                    noSwiping={true}
                    effect="fade"
                >
                    {NavMapping.map(({ uuid, Temp }) => (
                        <SwiperSlide key={uuid} className='swiper-no-swiping'>
                            <Temp />
                        </SwiperSlide>
                    ))}
                </Swiper>
            </div>
        </div>
    );
};

export default SetSystem;